<template>
  <el-form :inline="true" class="demo-form-inline" label-width="80px" :data="cha">
    <el-form-item label="分类名称" style="width: 300px;">
      <el-input placeholder="请输入分类名称" clearable v-model="showform.name" />
    </el-form-item>
    <el-form-item label="所属店铺" style="width: 240px;">
      <el-select placeholder="所属店铺" v-model="showform.shop">
        <el-option label="公共商品" value="公共商品" />
        <el-option label="海口解放路店" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="商品条码" style="width: 240px;">
      <el-input placeholder="请选择商品条码" clearable label-width="100px" v-model="showform.barcode" />
    </el-form-item>
    <el-form-item label="商品分类" prop="genre">
      <el-select placeholder="商品分类" clearable v-model="showform.genre">
        <el-option label="生活用品" value="0">生活用品</el-option>
        <el-option label="好物推荐" value="1">好物推荐</el-option>
        <el-option label="办公用品" value="2">办公用品</el-option>
        <el-option label="打折热销" value="3">打折热销</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="状态" style="width: 200px;">
      <el-select placeholder="状态" clearable v-model="state">
        <el-option label="上架" value="1" />
        <el-option label="下架" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item>
    </el-form-item>
    <el-button type="primary" color="#00acac" @click="chaxun"><el-icon>
        <Search />
      </el-icon>搜索</el-button>
    <el-button class="chong"><el-icon>
        <Refresh />
      </el-icon>重置</el-button>
    <el-button type="primary" plain color="#00acac" @click="showAddDialog = true">
      <el-icon>
        <Plus />
      </el-icon>新增
    </el-button>
  </el-form>
  <!-- 列表 -->
  <el-table :data="list" height="450px">
    <el-table-column label="id" prop="id" />
    <el-table-column label="所属店铺" prop="shop" width="120">
      <template #default="{ row }">
        {{ showsort(row.shop) }}
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="name" width="120" />
    <el-table-column label="主图" prop="img" width="120">
      <!-- el-table-cloumn 可以使用默认插槽  这个插槽提供了一个
          插槽作用域 方便我们来获取当前行的所有信息 以便我们进行自定义的展示
        -->
      <template #default="{ row }">
        <img :src="row.img" alt="" width="50" height="50">

      </template>
    </el-table-column>
    <el-table-column label="商品条码" prop="barcode" width="200" />
    <el-table-column label="所属分类" prop="classify" width="120">
      <template #default="{ row }"> {{ sangpin(row.classify) }}</template>
    </el-table-column>
    <el-table-column label="价格" prop="name" />
    <el-table-column label="创建时间" prop="creationTime" width="120">
      <template #default="{ row }"> {{ formatTime(row.createdAt) }}</template>
    </el-table-column>
    <el-table-column label="更新时间" prop="turnoverTime" width="120">
      <template #default="{ row }"> {{ formatTime(row.updatedAt) }}</template>
    </el-table-column>
    <el-table-column label="状态" prop="state" width="120">
      <template #default="{ row }">
        <!-- 状态按钮 -->
        <el-switch v-model="row.state" class="ml-2" :active-value="1" :inactive-value="0" :before-change="()=>changestate(row, row.state, row.id)" />
      </template>
    </el-table-column>

    <el-table-column label="操作" fixed="right" width="150">
      <template #default="{ row }">
        <div class="but">
          <span @click="openEdit({ ...row })" style="color:#00acac ;"> <el-icon>
              <Edit />
            </el-icon>编辑</span>
          <span @click="handleDel(row.id)" style="color:#00acac ;"><el-icon>
              <Delete />
            </el-icon>删除</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination layout="prev, pager, next, sizes" :total="total" :default-page-size="limit" :current-page="page"
    @size-change="handeSizeChange" @current-change="handlePageChange" />
  <!-- 启动弹窗 -->
  <el-dialog v-model="qidong" title="修改商品" class="qidong" width="300px">
    <el-form label-width="150px" class="qi" :rules="rules" ref="addfrom" model="editGoods">
      <el-form-item label="状态" prop="state" width="200px">
        <!-- 单选 -->
        <el-radio-group v-model="editGoods.state">
          <el-radio :label="1" name="state">启动</el-radio>
          <el-radio :label="0" name="state">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Eidt" class="bb">确定</el-button>
        <el-button @click="qidong = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 弹窗 -->
  <el-dialog v-model="showAddDialog" title="新增商品分类" class="beijing" width="800px">
    <el-tabs>
      <!-- 基础信息 -->
      <!-- :rules="rules" 检验是否有 prop的值 -->
      <!-- addfrom 验证表单 是否全部完成验证 -->
      <el-tab-pane label="基础信息" name="second">
        <el-form ref="addfrom" label-width="150px" class="form" :model="shangpgoods" :rules="rules">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="shangpgoods.name" />
          </el-form-item>
          <el-form-item label="商品条码" prop="barcode">
            <el-input v-model="shangpgoods.barcode" />
            <a @click="open">随机生成条码</a>
          </el-form-item>
          <el-form-item label="商品分类" prop="genre">
            <el-select placeholder="商品分类" clearable v-model="shangpgoods.genre">
              <el-option label="生活用品" value="0">生活用品</el-option>
              <el-option label="好物推荐" value="1">好物推荐</el-option>
              <el-option label="办公用品" value="2">办公用品</el-option>
              <el-option label="打折热销" value="3">打折热销</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属店铺" prop="shop">
            <el-select placeholder="所属店铺" clearable v-model="shangpgoods.shop">
              <el-option label="公共商品" value="0">公共商品</el-option>
              <el-option label="海口解放路店" value="1">海口解放路店</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片" prop="img">
            <!-- 图片上传 -->
            <!-- list-type 添加显示图片 name 图片上传的名称 action 上传图片的接口 绑定一个数组要是表格可以直接渲染 要是表单就要写插槽 on-success 组件带的一个方法-->
            <el-upload list-type="picture-card" name="file" action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader" v-model:file-list="fileList" :on-success="UploadOk">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <!-- 单选 -->
            <el-radio-group v-model="shangpgoods.state">
              <el-radio :label="1" name="state">启动</el-radio>
              <el-radio :label="0" name="state">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd" class="bb">确定</el-button>
            <el-button @click="showAddDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--  扩展信息-->
      <el-tab-pane label="扩展信息" name="first">
        <el-form :model="shangpgoods" label-width="120px" class="form" :rules="rulesk" ref="addfrom" prop="integral">
          <el-form-item label="积分抵扣" prop="integral">
            <el-radio-group v-model="shangpgoods.integral">
              <el-radio label="1" name="integral">可用</el-radio>
              <el-radio label="0" name="integral">不可用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员折扣" prop="vip">
            <el-radio-group v-model="shangpgoods.vip" prop="vip">
              <el-radio label="1" name="vip">有折扣</el-radio>
              <el-radio label="0" name="vip">没有折扣</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="规格类型" prop="type">
            <el-radio-group v-model="shangpgoods.type">
              <el-radio label="1" name="aa">单规格</el-radio>
              <el-radio label="0" name="aa">多规格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存数量 " prop="num">
            <!-- size="large" 设置输入框的大小 -->
            <el-input v-model="shangpgoods.num" placeholder="请输入数量" size="large" />
          </el-form-item>
          <el-form-item label="商品价格" prop="commodity_prices">
            <el-input v-model="shangpgoods.commodity_prices" placeholder="请输入商品价格" size="large" />
            <div class="tishi">单位：元</div>
          </el-form-item>
          <el-form-item label="划线价格" prop="Scribing_price">
            <el-input v-model="shangpgoods.Scribing_price" placeholder="请输入划线价格" size="large" />
            <div class="tishi">单位：元</div>
          </el-form-item>
          <el-form-item label="初始销量" prop="Initial_sales">
            <el-input v-model="shangpgoods.Initial_sales" placeholder="请输入初始销量" size="large" />
            <div class="tishi">提示：输入数字，虚拟销量</div>
          </el-form-item>
          <el-form-item label="商品重量" prop="Commodity_weight">
            <el-input v-model="shangpgoods.Commodity_weight" placeholder="请输商品重量" size="large" />
            <div class="tishi">提示：输入数字,单位kg</div>
          </el-form-item>
          <el-form-item label="商品卖的" prop="Commodity_buying">
            <el-input v-model="shangpgoods.Commodity_buying" placeholder="请输商品卖的" size="large" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd" class="bb">确定</el-button>
            <el-button v-model="showAddDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 商品介绍 -->
      <el-tab-pane label="商品介绍" name="third">
        <el-form :model="shangpgoods" class="form" style="padding-right: 0px;">
          <!-- 富文本 -->
          <QuillEditor theme="snow" v-model:content="shangpgoods.desc" contentType="html" :modules="modules"
            toolbar="full" />
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- :rules="rules" 检验是否有 prop的值 -->
    <!-- addfrom 验证表单 是否全部完成验证 -->
  </el-dialog>
  <!-- 编辑 -->
  <el-dialog v-model="showbianji" title="修改商品" class="beijing" width="800px">
    <el-tabs>
      <!-- 基础信息 -->
      <!-- :rules="rules" 检验是否有 prop的值 -->
      <!-- addfrom 验证表单 是否全部完成验证 -->
      <el-tab-pane label="基础信息" name="second">
        <el-form ref="addfrom" label-width="150px" class="form" :model="editGoods" :rules="rules">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="editGoods.name" />
          </el-form-item>
          <el-form-item label="商品条码" prop="barcode">
            <el-input v-model="editGoods.barcode" />
            <a @click="open">随机生成条码</a>
          </el-form-item>
          <el-form-item label="商品分类" prop="genre">
            <el-select placeholder="商品分类" clearable v-model="editGoods.genre">
              <el-option label="生活用品" value="0">生活用品</el-option>
              <el-option label="好物推荐" value="1">好物推荐</el-option>
              <el-option label="办公用品" value="2">办公用品</el-option>
              <el-option label="打折热销" value="3">打折热销</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属店铺" prop="shop">
            <el-select placeholder="所属店铺" clearable v-model="editGoods.shop">
              <el-option label="公共商品" value="0">公共商品</el-option>
              <el-option label="海口解放路店" value="1">海口解放路店</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片" prop="img">
            <!-- 图片上传 -->
            <!-- list-type 添加显示图片 name 图片上传的名称 action 上传图片的接口 绑定一个数组要是表格可以直接渲染 要是表单就要写插槽 on-success 组件带的一个方法-->
            <el-upload v-model="editGoods.img" list-type="picture-card" name="file"
              action="http://www.wzsqyg.com/attachment/upload" class="avatar-uploader" v-model:file-list="fileList"
              :on-success="bianUploadOk"
              :http-request="handleUpload"
              >
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <!-- 单选 -->
            <el-radio-group v-model="editGoods.state" fill='#00acac'>
              <el-radio :label="1" name="state">启动</el-radio>
              <el-radio :label="0" name="state">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleEidt" class="bb">确定</el-button>
            <el-button @click="showbianji = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--  扩展信息-->
      <el-tab-pane label="扩展信息" name="first">
        <el-form :model="editGoods" label-width="120px" class="form" :rules="rulesk" ref="addfrom" prop="integral">
          <el-form-item label="积分抵扣" prop="integral">
            <el-radio-group v-model="editGoods.integral" fill='#00acac'>
              <el-radio label="1" name="integral">可用</el-radio>
              <el-radio label="0" name="integral">不可用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员折扣" prop="vip">
            <el-radio-group v-model="editGoods.vip" prop="vip" fill='#00acac'>
              <el-radio label="1" name="vip">有折扣</el-radio>
              <el-radio label="0" name="vip">没有折扣</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="规格类型" prop="type">
            <el-radio-group v-model="editGoods.type" fill='#00acac'>
              <el-radio label="1" name="aa">单规格</el-radio>
              <el-radio label="0" name="aa">多规格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存数量 " prop="num">
            <!-- size="large" 设置输入框的大小 -->
            <el-input v-model="editGoods.num" placeholder="请输入数量" size="large" />
          </el-form-item>
          <el-form-item label="商品价格" prop="commodity_prices">
            <el-input v-model="editGoods.commodity_prices" placeholder="请输入商品价格" size="large" />
            <div class="tishi">单位：元</div>
          </el-form-item>
          <el-form-item label="划线价格" prop="Scribing_price">
            <el-input v-model="editGoods.Scribing_price" placeholder="请输入划线价格" size="large" />
            <div class="tishi">单位：元</div>
          </el-form-item>
          <el-form-item label="初始销量" prop="Initial_sales">
            <el-input v-model="editGoods.Initial_sales" placeholder="请输入初始销量" size="large" />
            <div class="tishi">提示：输入数字，虚拟销量</div>
          </el-form-item>
          <el-form-item label="商品重量" prop="Commodity_weight">
            <el-input v-model="editGoods.Commodity_weight" placeholder="请输商品重量" size="large" />
            <div class="tishi">提示：输入数字,单位kg</div>
          </el-form-item>
          <el-form-item label="商品卖的" prop="Commodity_buying">
            <el-input v-model="editGoods.Commodity_buying" placeholder="请输商品卖的" size="large" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd" class="bb">确定</el-button>
            <el-button v-model="showAddDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 商品介绍 -->
      <el-tab-pane label="商品介绍" name="third">
        <el-form :model="editGoods" class="form" style="padding-right: 0px;">
          <!-- 富文本 -->
          <QuillEditor theme="snow" v-model:content="editGoods.desc" contentType="html" :modules="modules"
            toolbar="full" />
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" src="./index" ></script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.demo-form-inline {
  background-color: gainsboro;
  border-radius: 10px;
  margin: 0 10px;
  padding-top: 20px;
}

/* 外层背景 */
.beijing {
  height: 900px;
  color: white;
  background-color: cadetblue;
}

.el-dialog__title {
  color: white;
}

/* 内层背景 */
.form {
  padding-top: 20px;
  padding-right: 50px;
  height: 700px;
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: space-between;
}

/* 图标X */
.el-icon svg {
  color: #606266;
}

.el-form-item__label {
  color: #606266;
  font-weight: 800;
  /* padding: 0; */
  margin: 0;
  justify-content: none;
}

.chong:hover {
  color: white;
  background-color: #00acac;
}

label.style {
  width: 10px;
}

/* 编辑按钮 */
.but {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

/* 图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 80px;
  text-align: center;
}

.el-tabs__item.is-active {
  color: white;
}

.el-tabs__item:hover {
  color: white;
}

/* 分页颜色 */
.el-pagination.is-background .el-pager li.is-active {
  color: white;
  background-color: #00acac;
}

.el-switch__core {
  background-color: #00acac;
}

/* 启动 */
.qidong {
  width: 600px;
}

.qidong>.qi {
  width: 500px;
}

.el-switch.is-checked .el-switch__core {
  background-color: #00acac;
  border: none;
}

.el-switch__core {
  background-color: #8c939d;
}

/* 按钮 */
.bb {
  background-color: #00acac;
  border: none;
}

.bb:hover {
  background-color: #00acacab;
}

/* 单选按钮颜色 */
.el-radio__input.is-checked+.el-radio__label {
  color: #00acac;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: #00acac;
  color: #00acac;
}
.but:hover{
  background-color: none;
}
</style>
